<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" :destroy-on-close="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'" :disabled="disabled">
        <!-- <el-form-item label="ID" prop="id">
              <el-input v-model="dataForm.id" placeholder="ID"></el-input>
            </el-form-item> -->
        <el-row :gutter="30">
            <el-col :span="24">
                <el-form-item label="问题名称" prop="name">
                    <el-input v-model="dataForm.name" placeholder="问题名称"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item class="imgLabel" label="答案" prop="answers">
                    <div v-for="(item,index) in dataForm.answers" :key="index" style="margin-bottom:10px">
                        <el-input type="textarea" :rows="4" v-model="item.name" placeholder="答案" style="width:86%"></el-input>
                        <el-button type="danger" size="mini" @click="del(index)" style="margin-left:10px">删除</el-button>
                    </div>
                    <el-button type="primary" @click="add()">新增</el-button>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="问题来源" prop="source">
                    <SelectComponent ref="source" dictType="source_file" v-model="dataForm.source" placeholder="问题来源">
                    </SelectComponent>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="问题类型" prop="type">
                    <SelectComponent ref="type" dictType="question_type" v-model="dataForm.type" placeholder="问题类型" @change="$forceUpdate()">
                    </SelectComponent>
                </el-form-item>
            </el-col>
        </el-row>
        <!-- <el-form-item label="'状态  0：停用    1：正常'" prop="status">
              <el-input v-model="dataForm.status" placeholder="'状态  0：停用    1：正常'"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
              <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
            </el-form-item>
            <el-form-item label="'删除标识  0：未删除    1：删除'" prop="delFlag">
              <el-input v-model="dataForm.delFlag" placeholder="'删除标识  0：未删除    1：删除'"></el-input>
            </el-form-item>
            <el-form-item label="创建者" prop="creator">
              <el-input v-model="dataForm.creator" placeholder="创建者"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" prop="createDate">
              <el-input v-model="dataForm.createDate" placeholder="创建时间"></el-input>
            </el-form-item>
            <el-form-item label="更新者" prop="updater">
              <el-input v-model="dataForm.updater" placeholder="更新者"></el-input>
            </el-form-item>
            <el-form-item label="更新时间" prop="updateDate">
              <el-input v-model="dataForm.updateDate" placeholder="更新时间"></el-input>
            </el-form-item> -->
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from "lodash/debounce";
export default {
    data() {
        return {
            bbb: {
                select: 1,
            },
            visible: false,
            dataForm: {
                id: "",
                name: "",
                answers: [{
                    name: ''
                }],
                source: "",
                type: "",
            },
        };
    },
    watch: {

    },
    props: {
        disabled: Boolean
    },
    created() {},
    computed: {
        dataRule() {
            return {
                name: [
                    { required: true, message: this.$t('validate.required'), trigger: 'blur' }
                ],
                type: [
                    { required: true, message: this.$t('validate.required'), trigger: 'change' }
                ],
            };
        },
    },
    methods: {
        add() {
            console.log(this.dataForm.answers)
            this.dataForm.answers.push({
                name: ''
            })
        },
        del(index) {
            this.dataForm.answers.splice(index, 1);
        },
        queding() {
            this.dataForm.type = 2;
        },

        close() {
            this.dataForm = {
                name: "",
                answers: [{
                    name: ''
                }],
                source: "",
                type: "",
            };
            this.$emit("changeDisabled");
        },
        init() {
            this.visible = true;
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/sys/isquestion/getOne", {
                    params: {
                        id: this.dataForm.id
                    }
                })
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    this.dataForm.answers = this.dataForm.answers || [];
                    this.dataForm.source = this.dataForm.source + "";
                    this.dataForm.type = this.dataForm.type + "";
                    this.$refs.type.selectValue = this.dataForm.type;
                    this.$refs.source.selectValue = this.dataForm.source;

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }

                    if(this.dataForm.answers.find(a=>!a.name)) return this.$message.error('请输入答案');
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/isquestion/",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
<style scoped lang="scss">
    ::v-deep .imgLabel {
      & > label::before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
</style>
